<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <!--<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>-->
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <!--<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>-->
</head>
<body>
<div id="app">
    <div class="main-content">
        <h2 v-cloak>客服信息</h2>
        <el-row>
            <el-col :span="12">
                <el-form ref="customerSer-form" :model="customerSer" :rules="rules" size="small" label-width="100px">

                    <el-form-item hidden label="ID" prop="uuid">
                        <el-input v-model="customerSer.uuid"></el-input>
                    </el-form-item>

                    <el-form-item label="类型" prop="type">
                        <el-select v-model="customerSer.type" placeholder="类型">
                            <el-option v-for="type in typeList" :key="type.value" :label="type.name" :value="type.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="名称" prop="name">
                        <el-input v-model="customerSer.name"></el-input>
                    </el-form-item>

                    <el-form-item label="号码" prop="number">
                        <el-input v-model="customerSer.number"></el-input>
                    </el-form-item>

                    <el-form-item label="排序值" prop="sortValue">
                        <el-input v-model="customerSer.sortValue"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="small" width="100" @click="updateCustomerSer" v-cloak>保存</el-button>
                        <el-button size="small" width="100" @click="cancel" v-cloak>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            typeList: [{"name": "个人QQ", "value": "1"}, {"name": "企业QQ", "value": "2"},{"name": "旺旺", "value": "3"},{"name": "微信", "value": "4"},{"name": "电话", "value": "5"}],
            customerSer: [[${dto}]],
            rules: {
                name: [
                    {required: true, message: "请输入客服名称", trigger: 'blur'}
                ],
                type: [
                    {required: true, message: "请选择客服类型", trigger: 'blur'}
                ],
                number: [
                    {required: true, message: "请输入客服号码", trigger: 'blur'}
                ],
                sortValue: [
                    {required: true, message: "请输入客服排序值", trigger: 'blur'}
                ]
            }
        },
        methods: {
            updateCustomerSer: function () {
                var self = this;

                let customerSer = {
                    name: self.customerSer.name,
                    typeName: self.customerSer.typeName,
                    number: self.customerSer.number,
                    sortValue: self.customerSer.sortValue
                };

                self.$refs['customerSer-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/system/cms/customerservice/edit",
                            type: "POST",
                            data: JSON.stringify(customerSer),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '编辑客服成功',
                                        type: 'success',
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/system/permission/role/tolist';
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '编辑客服失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                }
                            },
                            error: function () {
                                self.loading = false;
                                self.$message({
                                    message: '系统异常，请联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                            }
                        });
                    } else {
                        this.$message({
                            message: '请正确填写客服信息',
                            type: 'warning',
                            customClass: 'message-center'
                        });
                        return false;
                    }
                });
            },
            cancel: function () {
                window.location.href = "/system/cms/customerservice/tolist"
            }
        }
    });
</script>
</html>
